<template>
  <div class="loading-card-wrapper">
    <ul class="list" ref="list" v-show="!nomore">
      <li>L</li>
      <li>O</li>
      <li>A</li>
      <li>D</li>
      <li>I</li>
      <li>N</li>
      <li>G</li>
      <li>.</li>
      <li>.</li>
      <li>.</li>
    </ul>
    <ul class="list1" ref="list1" v-show="nomore">
      <li>N</li>
      <li>O</li>
      <li>M</li>
      <li>O</li>
      <li>R</li>
      <li>E</li>
      <li>.</li>
      <li>.</li>
      <li>.</li>
      <li>.</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref } from 'vue'
defineProps<{
  nomore: boolean
}>()
let list: Ref<HTMLUListElement | null> = ref(null)
onMounted(() => {
  let letters = (list.value as HTMLUListElement).children
  for (let i = 0; i < letters.length; i++) {
    ;(letters.item(i) as HTMLLIElement)!.style.animationDelay = i * 0.1 + 's'
  }
})
</script>

<style lang="scss" scoped>
@import 'style/config';
@import 'style/shortcut';

$w: $iwp1;
$h: 250px;

.loading-card-wrapper {
  box-sizing: border-box;
  width: $w;
  height: $h;

  @include flex();

  .list,
  .list1 {
    $ih: $h * 0.4;
    width: $w * 0.8;
    height: $h;
    @include flex();

    li {
      width: 10%;
      height: $ih;
      /* float: left; */

      line-height: $ih;
      font-size: $ih * 0.8;
      font-weight: bold;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      color: $lightGray;
      text-align: center;
    }
  }

  .list li {
    animation: loading 3s 0s ease-in-out infinite;
  }
}

@keyframes loading {
  from {
    transform: translateY(0);
    color: $lightGray;
  }
  15% {
    transform: translateY(-70%);
    color: $blue;
  }
  30% {
    transform: translateY(0);
    color: $lightGray;
  }
  to {
    transform: translateY(0);
  }
}
</style>
